<template>
	<div class="box">
		<div class="header">
			<p>新型冠状病毒肺炎</p>
			<h1>疫情实时大数据报告</h1>
		</div>
		<div class="container">
			<el-row type="flex" justify="center">
				<el-col :xs="24" :md="16">
					<div class="middle">
						<div class="middle_top">
							<el-row>
								<el-col :span="24">
									<!-- 顶部总数据 -->
									<topdata></topdata>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="24">
									<!-- 中国地图 -->
									<chinamap></chinamap>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="24">
									<chindaevetydatashow></chindaevetydatashow>
								</el-col>
							</el-row>
							<el-row class="middle_chinaData">
								<chinadata></chinadata>
							</el-row>
							<el-row>
								<el-col :span="24">
									<!-- Top10 城市 -->
									<chinadatashow></chinadatashow>
								</el-col>
							</el-row>
							<el-row>
								<el-col>
									<foreigndata></foreigndata>
								</el-col>
							</el-row>
							<el-row>
								<el-col>
									<news></news>
								</el-col>
							</el-row>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import "echarts/map/js/china.js"
	import jsonp from 'jsonp'
	import topdata from './inner/top_data.vue'
	import chinamap from './inner/chinamap.vue'
	import chinadatashow from './inner/chinadatashow.vue'
	import chinadata from './inner/chinadata.vue'
	import foreigndata from './inner/foreigndata.vue'
	import chindaevetydatashow from './inner/chindaeverydatashow.vue'
	import news from './inner/news.vue'
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		mounted() {

		},
		filters: {

		},
		components: {
			topdata,
			chinamap,
			chinadatashow,
			chinadata,
			foreigndata,
			chindaevetydatashow,
			news
		}
	}
</script>

<style>
	.box {
		width: 100%;
		height: 100%;
		background-color: #10aeb5;
	}

	canvas {
		border-radius: 10px;
		border: 1px #10aeb5 dashed;
	}

	.header {
		padding-top: 20px;
		margin-bottom: 10px;
	}

	.container {
		padding: 10px;
	}

	.container .middle {
		height: 800px;
	}

	.container .middle .middle_top {
		border-radius: 10px;
		text-align: center;
		height: calc(100vh);
		background-color: white;
	}
</style>
